<template>
  <div class="fans-list">
    <home-nav :title="title" :more="false"/>
    <ul>
      <li v-for="item in followsList" :key="item.userId" class="w-full flex items-center justify-between">
        <div class="flex mt-2 mb-2">
          <div class="w-18 h-18 mr-2">
            <img style="width:100%;height: 100%" :src="item.avatarUrl" alt="">
          </div>
          <div class="flex flex-col justify-between flex-initial">
            <div class="font-bold flex items-center">
              <span class="yu-textColor-hover" @click="jumpHomePage(item.userId)">{{ item.nickname }}</span>
              <span v-if="item?.avatarDetail" class="inline-block ml-1 w-5 h-5">
                <img style="width: 100%; height: 100%" :src="item?.avatarDetail?.identityIconUrl" alt="">
              </span>
              <span class="text-2xl ml-2" v-if="item.gender !== 0">
                <span v-if="item.gender === 1" class="i-mdi-gender-male inline-block yu-titleColor" />
                <span v-if="item.gender === 2" class="inline-block i-mdi-gender-female yu-color-text" />
              </span>
            </div>
            <div class="text-sm">
              <div class="flex justify-between">
                <span>动态 <i>{{ item.eventCount }}</i></span>
                <span class="mr-1 ml-1" @click="jumpHomePage(item.userId, 0)">关注 <i> {{ item.follows }}</i></span>
                <span @click="jumpHomePage(item.userId, 1)">粉丝 <i>{{ item.followeds }}</i></span>
              </div>
              <span class="w-50 truncate inline-block">{{ item.signature }}</span>
            </div>
          </div>
        </div>
        <div>
          <YuButton padding="0 10px" v-if="!item.followed" @click="attentionUser(item.userId, item.followed)">
            <div class="flex items-center">
              <span class="text-xl">+</span>
              <span>关注</span>
            </div>
          </YuButton>
          <div v-else class="flex flex-col items-center">
            <YuButton padding="1px 10px" @click="sendTextFn(item.userId)">
              <div class="flex items-center">
                <span class="i-mdi-email mr-2"/>
                <span>私信</span>
              </div>
            </YuButton>
            <span class="inline-block mt-1">已关注</span>
          </div>
        </div>
      </li>
      <van-pagination
          v-if="totalItems > params.limit"
          class="van-pagination"
          v-model="params.num"
          :total-items="totalItems"
          :items-per-page="20"
          :show-page-size="6"
          force-ellipses
          @change="pageChange"
      >
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
        <template #page="{ text }">{{ text }}</template>
      </van-pagination>
    </ul>
  </div>
</template>

<script setup>
import {useRoute, useRouter} from "vue-router";
import {computed, defineEmits, reactive, ref, toRefs, watchEffect} from "vue";
import {useStore} from "@/store/index";
import HomeNav from '@/components/HomeNav/index.vue'
import YuButton from '@/components/YuButton/index.vue'
import {setIsFollow} from "@/api/share/index";

const route = useRoute()
const router = useRouter()
const store = useStore()
const followsList = ref([])

const data = reactive({
  params: {
    num: 1,
    limit: 20
  }
})
const {params} = toRefs(data)

// 获取关注的人
const getUserFollowsFn = () => {
  store.getUserFollows({userId: route.query.id, ...data.params}).then(follows => {
    followsList.value = follows
    // console.log(follows)
  })
}
// 获取粉丝人数
const getUserFollowedsFn = () => {
  store.getUserFolloweds({userId: route.query.id, ...data.params}).then(followeds => {
    followsList.value = followeds
  })
}


const $emit = defineEmits(['sendTextFn'])
// 关注和取消关注
const attentionUser = (userId, followed) => {
  // t:1关注 其他为取消关注
  setIsFollow({id: userId, t: followed ? 2 : 1}).then(res => {
    const {code} = res
    if (Number(code) === 200) getUserFollowsFn()
  })
}

// 发送私信
const sendTextFn = (id) => {
  $emit('sendTextFn', id)
}

// 跳转到用户详情
const jumpHomePage = (id, type) => {
  router.push({
    path: '/user/homepage',
    query: {
      id,
      type
    }
  })
}

// 分页改变时触发
const pageChange = (page) => {
  data.params.num = page
  if (props.typeAction === 0) {
    // 获取关注人数
    getUserFollowsFn()
  } else if (props.typeAction === 1) {
    // 获取粉丝人数
    getUserFollowedsFn()
  }
}

const props = defineProps({
  userInfoHeader: {
    type: Object,
    default: {}
  },
  typeAction: {
    type: Number,
    default: 1
  }
})

// 用于处理当前typeAction返回长度
const totalItems = computed(() => {
  if (props.typeAction === 0) return props.userInfoHeader?.profile?.follows
  if (props.typeAction === 1) return props.userInfoHeader?.profile?.followeds
})
// 展示标题头是关注还是粉丝
const title = computed(() => {
  if (props.typeAction === 0) return `关注（${props.userInfoHeader?.profile?.follows}）`
  if (props.typeAction === 1) return `粉丝（${props.userInfoHeader?.profile?.followeds}）`
})
let flag = null
watchEffect(() => {
  if (flag !== props.typeAction) {
    flag = props.typeAction
    // 获取关注人数
    if (props.typeAction === 0) {
      data.params.num = 1
      getUserFollowsFn()
    } else if (props.typeAction === 1) {
      data.params.num = 1
      // 获取粉丝人数
      getUserFollowedsFn()
    }
  }
})
</script>

<style scoped lang="scss">
i {
  color: v-bind('store.theme.textColor');

  &:hover {
    cursor: pointer;
    color: v-bind('store.theme.hoverTextColor') !important;
  }
}

:deep(.van-pagination) {

  .van-pagination__item--prev,.van-pagination__item--next  {

  }
  .van-pagination__item--active {
    color: v-bind('store.theme.hoverTextColor')!important;
  }
  .van-pagination__item--page, .van-pagination__item--next, .van-pagination__item--prev {
    color: v-bind('store.theme.textColor');
    button {
      background-color: v-bind('store.theme.HoverBgColor');
    }
  }
}

</style>
